{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    <div class="pad10">
        <div class="shadow3 flrc round2">
            <div class="pad10 c12 pos-r fs8">
                <span class="fa fa-arrow-left"></span>
                <mu-ripple @click="goback"></mu-ripple>
            </div>
            <div class="flex1 tac">
                <input v-model="keyword" type="text" class="inputPlain" placeholder="搜索商家、商品、服务">
            </div>
            <div>
                <mu-button @click="doSearch()" icon><span class="fa fa-search fs8 c12"></span></mu-button>
            </div>
        </div>

        <div class="mart10" v-if="!showList && isTrue(my)">
            <div class="fs8 fwb">历史搜索</div>
            <div class="flex-r flex-wrap flex-start fs8">
                <div class="btn-small bc13 c11 mar5 round30 pos-r" v-for="item in my">
                    <mu-ripple @click="keyword=item.keywords">[[item.keywords]]</mu-ripple>
                </div>
            </div>
        </div>
        <div class="mart10" v-if="!showList && isTrue(isHot)">
            <div class="fs8 fwb">热门搜索</div>
            <div class="flex-r flex-wrap flex-start fs8">
                <div class="btn-small bc13 c11 mar5 round30 pos-r" v-for="item in isHot">
                    <mu-ripple @click="keyword=item.keywords">[[item.keywords]]</mu-ripple>
                </div>
            </div>
        </div>

        <div v-if="showList" class="mart10">
            <mu-tabs :value.sync="curTab" inverse color="secondary" text-color="rgba(0, 0, 0, .54)" >
                <mu-tab @click="tab(0)"><span>服务 <i>[[product.length]]</i></span></mu-tab>
                <mu-tab @click="tab(1)"><span>商家 <i>[[shop.length]]</i></span></mu-tab>
            </mu-tabs>

            {% import "ApiCloud/Base/loading.html.twig" as loading %}
            {{ loading.list() }}
            <div class="" v-if="curTab == 0">
                <div class="mar5 pad10 bdda round3 tac c12 fs8" v-if="!isTrue(product)">
                    没有找到相关数据
                </div>
                <div class="bc13 mart5 pos-r" v-for="item in product">
                    {#                <div> <img :src="picUrl(item.cover)" class="w100" style="max-height: 60vw;" alt="" onerror="this.src=pic404"></div>#}
                    <div  style="height: 60vw;background-position: center;" :style="picBg(item.cover)"></div>
                    <div class="flrc ofe lh2 pad5">
                        <div class="flex1 ofe">[[item.name]]</div>
                        <div class="c1 fs8">￥[[item.price]]/[[item.unit]]</div>
                    </div>
                    <mu-ripple  @click="goto('servicesInfo',{id:item.id})"></mu-ripple>
                </div>
            </div>
            <div v-if="curTab == 1">
                <div class="mar5 pad10 bdda round3 tac c12 fs8" v-if="!isTrue(shop)">
                    没有找到相关数据
                </div>
                <div class="bc13 mart5 pos-r" v-for="item in shop">
                    {#                <div> <img :src="picUrl(item.head)" class="w100" style="max-height: 60vw;" alt="" onerror="this.src=pic404"></div>#}
                    <div  style="height: 60vw;background-position: center;" :style="picBg(item.head)"></div>
                    <div class="flrc ofe lh2 pad5">
                        <div class="flex1 ofe">[[item.name]]</div>
                        <div class="c1 fs8"><span class="fa fa-eye padr3"></span>在售服务： [[ item.statistic.products ]] </div>
                    </div>
                    <mu-ripple  @click="goto('shopIndex',{id:item.id})"></mu-ripple>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
